<template>
  <div class="shop_details" :style="details_id==1?'position:fixed':''">
      <div class="content" v-for="(item,index) in list" :key="index" >
        <div class="swiper_box">
          <swiper class="swiper" circular="true" @change="change">
              <block v-for="(key,swiper_id) in item.swiper_img" :key="swiper_id">
                <swiper-item>
                  <image class="swiper_img" :src="key.img"/>
                </swiper-item>
              </block>  
            </swiper>
            <div class="dots">{{current}}/{{all_current}}</div>
        </div>
        <div class="shop_info">
            <div class="shop_info_t">
                <div class="shop_price">¥{{item.price}} <span>¥{{item.l_price}}</span></div>
                <div class="volume">销量:{{item.volume}}</div>
            </div>
            <div class="shop_info_b">
                <div class="shop_title">
                  <span class="h_number">{{item.h_number}} </span>{{item.title}}
                </div>
                <div class="share">
                    <image class="swiper_img" src="/static/images/product_sharing.png"/>
                    <div>商品分享</div>
                </div>
            </div>
        </div>
        <div class="parameter">
            <div class="change_list" v-for="(key,id) in change_list" :key="id" @click="parameter(id)">
              <div class="change_list_title">{{key.title}}</div>
              <image class="change_list_img" src="/static/images/more.png"/>
            </div>
            <div class="sign">
              <div class="sign_list" v-for="(sign,sign_id) in sign_list" :key="sign_id">
                <image class="change_list_img" src="/static/images/gou.png"/>
                <div>{{sign.title}}</div>
              </div>
            </div>     
        </div>
        <!-- 评价 -->
        <div class="evaluate" v-for="(item,evaluate_id) in evaluate_list" :key="evaluate_id">
            <div class="total" @click="evaluate(show_eval)">
              <div class="total_l">评价({{item.evaluate_num}})</div>
              <image src="/static/images/more.png"/>
            </div>
            <div class="popre_list" v-for="(item_popre,popre_id) in item.popre_list" :key="popre_id" @click="evaluate(popre_id)">
                <div class="popre_header">
                    <div class="popre_l">
                        <image src="/static/images/header_img.png"/>
                        <div class="popre_info">
                            <div class="popre_name">{{item_popre.name}}</div>
                            <div class="popre_time">{{item_popre.time}}</div>
                        </div>
                    </div>
                    <div class="popre_r">
                        <div class="stars">
                          <image :src="item_popre.start-4==0.5?starImg:(item_popre.start>=5?afterImg:beforeImg)"/>
                          <image :src="item_popre.start-3==0.5?starImg:(item_popre.start>=4?afterImg:beforeImg)"/>
                          <image :src="item_popre.start-2==0.5?starImg:(item_popre.start>=3?afterImg:beforeImg)"/>
                          <image :src="item_popre.start-1==0.5?starImg:(item_popre.start>=2?afterImg:beforeImg)"/>
                          <image :src="item_popre.start-0==0.5?starImg:(item_popre.start>=1?afterImg:beforeImg)"/>
                        </div>  
                    </div>
                </div>
                <div class="popre_title">{{item_popre.title}}</div>
                <div class="evaluate_img_box">
                    <div class="evaluate_box" v-for="(evaluate,img_id) in item_popre.evaluate_img" :key="img_id">
                        <image  :src="evaluate.img"/>
                    </div>
                </div>
            </div>
            <div class="all_evaluate_box">
                <div class="all_evaluate">查看全部评价({{item.evaluate_num}})</div>
            </div>
        </div>
        <!-- 上拉查看图文详情 -->
        <div class="pull_up">
            <div class="pull_l"></div>
            <div class="pull_title">
                <image src="/static/images/slcktwxq.png"/>
                <div>上拉查看图文详情</div>
            </div>
            <div class="pull_r"></div> 
        </div>
      </div>
      <div style="width:100%;height:100rpx;background:#fff"></div>
      <div class="footer">
        <div class="footer_list">
            <div class="footer_info"  v-for="(item,footer_id) in footer_list" :key="footer_id" @click="footer(item,footer_id)">
                <div class="footer_l" v-if="footer_id==1?true:false"></div>
                <div class="footer_box" :style="footer_id==0 || footer_id==2?'padding-left:44rpx':''">
                      <image :src="item.img"/>
                      <div class="footer_title">{{item.title}}</div>
                </div>
                <div class="footer_r" v-if="footer_id==1?true:false"></div>  
            </div>  
        </div>
        <div class="shopCar">加入购物车</div>  
        <div class="goBuy" @click="goBuy">立即购买</div>  
      </div>  

      <!-- 商品选择弹出层 -->
      <van-popup :show="choice_show" z-index="999" position="bottom" close-on-click-overlay="false" @close="shopOverlay" custom-style="border-radius:30rpx 30rpx 0rpx 0rpx;">
        <div class="choice_box">
            <div class="choice_title">
                <div>产品参数</div>
            </div>
            <div class="scrool">
                <div class="choice_list" v-for="(item,choice_id) in choice_list" :key="choice_id">
                  <div class="shop_choice_title">{{item.title}}</div>
                  <div class="choice_content">{{item.content}}</div>
              </div>
            </div>       
            <div class="choice_white">
              <div class="choice_footer" @click="goBuys">立即购买</div>
            </div>
        </div>   
      </van-popup>  
      <!-- 产品参数弹出层 -->
      <van-popup :show="shop_show" z-index="999" position="bottom" close-on-click-overlay="false" @close="shopOverlay" custom-style="border-radius:30rpx 30rpx 0rpx 0rpx;">
          <div class="shop_list" v-for="(item,shop_id) in shop_list" :key="shop_id">
            <div class="shop_header">
              <image class="shop_header_l" :src="item.img" alt=""/>
              <div class="shop_header_r">
                <div class="header_r_t">{{item.title}}</div>
                <div class="header_r_c">库存： {{item.ku_num}}件</div>
                <div class="header_r_b">¥{{item.price}}</div>
              </div> 
            </div> 
            <div class="color">颜色</div> 
            <div class="color_list">
                <div class="color_center" :style="color_rex==color_id?'background:#FF3D4FFF;color:#fff':''" v-for="(color,color_id) in item.color_list" :key="color_id" @click="color_center(color_id,color)">{{color.title}}</div>
            </div>
            <div class="size">尺码</div> 
            <div class="size_list">
                <div class="size_center" :style="size_rex==size_id?'background:#FF3D4FFF;color:#fff':''" v-for="(size,size_id) in item.size_list" :key="size_id" @click="size_center(size_id,size)">{{size.title}}</div>
            </div>
            <div class="mum_box">
                <div class="num_l">数量 <span>(最多选择{{item.num}}件)</span></div>
                <van-stepper custom-class="custom"
                  :value="num_value"
                  integer
                  min="1"
                  :max="item.num"
                  step="1"
                  @change="numChange"
                />
            </div>
            <div class="shop_footer" @click="goBuy">完成</div>
          </div>
      </van-popup>
  </div>
</template> 
<script>

export default {
  
  data () {
    return {
      details_id:0,
      color_rex:-1,   //颜色赋值
      size_rex:-1,    //尺寸赋值
      current:1,
      show_eval:-1,    //总评价赋值
      all_current:'',
      color_title:'',
      size_title:'',
      list:[{swiper_img:[{img:'/static/images/img.png'},{img:'/static/images/img.png'},{img:'/static/images/img.png'}],price:'123.89',l_price:'199.89',volume:'1235',h_number:'W82ZT703',
      title:'童装女童套装儿童春装2019新款品牌童装小女孩韩版潮衣时髦牛仔运动休019新款品牌童装小女孩韩版潮衣时髦牛仔运动休'}],
      change_list:[{title:'选择'},{title:'产品参数'}],
      sign_list:[{title:'产品参数'},{title:'自营品牌'},{title:'极速退货'},{title:'七天退换'}],
      shop_show:false,  //商品参数弹出层
      choice_show:false, //商品选择弹出层
      shop_list:[{img:'/static/images/img.png',title:'童装女童套装儿童春装2019新款品牌童装小女孩韩版潮衣时髦牛仔运动休',ku_num:'135',price:'99.99',color_list:[
        {title:'蓝色'},{title:'红黑'},{title:'紫色'},{title:'蓝白'},{title:'绿色'},{title:'藏青色'}
        ],size_list:[{title:'80cm'},{title:'90cm'},{title:'100cm'},{title:'110cm'},{title:'120cm'},{title:'130cm'}],num:'2'
      }],  //商品参数弹出层(商品)
      choice_list:[{title:'品牌',content:'史努比'},{title:'品牌',content:'史努比'},{title:'品牌',content:'史努比'},{title:'品牌',content:'史努比'},{title:'品牌',content:'史努比'},
            {title:'品牌',content:'史努比'},{title:'品牌',content:'史努比'},{title:'品牌',content:'史努比'},{title:'品牌',content:'史努比'},{title:'品牌',content:'史努比'},{title:'品牌',content:'史努比'}
            ,{title:'品牌',content:'史努比'},],   //商品选择弹出层
      evaluate_list:[
        {evaluate_num:135,
          popre_list:[
            {header_img:'/static/images/header_img.png',name:'姓名',time:'2019/05/03 15:36:20',start:1,title:'效果不错，用了半个月才来评价，值得购买',evaluate_img:[
            {img:'/static/images/img.png'},{img:'/static/images/img.png'},{img:'/static/images/img.png'}]},
            {header_img:'/static/images/header_img.png',name:'姓名',time:'2019/05/03 15:36:20',start:2.5,title:'效果不错，用了半个月才来评价，值得购买',evaluate_img:[
            {img:'/static/images/img.png'},{img:'/static/images/img.png'},{img:'/static/images/img.png'}]}
          ]
        }
      ],//评价数组 
      beforeImg:'/static/images/shop_star.png',   //灰星星
      afterImg:'/static/images/star_dian.png',    //黄星星
      starImg:'/static/images/star_click_half.png',    //半个星星
      footer_list:[{img:'/static/images/kf.png',title:'客服'},{img:'/static/images/sy.png',title:'首页'},{img:'/static/images/sc.png',title:'收藏'}]
    }
  },
  onLoad(){
      var that = this
      that.all_current = that.list[0].swiper_img.length    
  },
  methods: {
      //滑动轮播图
      change(event){
        this.current = event.target.current+1
      },
      //选择 选择/产品参数
      parameter(id){
        switch (id) {
          case 0:   //选择
            this.details_id=1
            this.shop_show=true
            break;
          case 1:   //产品参数
            this.details_id=1
            this.choice_show=true
            break;
        }
      },
      // 关闭产品参数弹出层
      shopOverlay(){
        this.details_id=0
        this.shop_show=false
        this.choice_show=false
      },
      //步数器
      numChange(e){
        console.log(e.target,'num')
      },
      //颜色选择
      color_center(id,color){
        this.color_rex=id
        this.color_title = color.title
      },
      //尺寸选择
      size_center(id,size){
        this.size_rex=id
        this.size_title = size.title
      },
      // 参数立即购买
      goBuys(){
        console.log(this.color_title)
        if(this.color_title==''|| this.size_title==''){
          console.log(this.choice_show)
          if(this.choice_show==true){
            this.choice_show=false
            this.shop_show=true
          }else{
            this.choice_show=true
          }
        }else{
          wx.navigateTo({
            url:'/pages/con_order/main'
          })
        }
      }, 
      // 评价详情
      evaluate(index){
        if(index=='-1'){
          console.log('总评价')
          wx.navigateTo({ 
            url: '/pages/shop_evaluate/main?index='+index
          })
        }else{
          wx.navigateTo({ 
            url: '/pages/shop_evaluate/main?index='+index
          })
        }
      },
      loadMore () {
        // let pageNum = this.pageNum;
        // let pageSize = this.pageSize;       
          wx.showLoading({
            title: '玩命加载中',
          })
          setTimeout(function () {
              wx.hideLoading()
            }, 2000)
        // 后台接口可忽略
      },
      goBuy(){
        if(this.color_title==''|| this.size_title==''){
          console.log(this.choice_show)
          if(this.choice_show==false){
            this.shop_show=true
          }else{
            this.choice_show=true
          }
        }else{
          // alert('可以购买')
          wx.navigateTo({
            url:'/pages/con_order/main'
          })
        }
        
      },
      // 客服，首页，收藏
      footer(item,id){
        switch (id) {
          case 0:
            //客服
            wx.showModal({
              title: '客服电话',
              content: '15640346926',
              success (res) {
                if (res.confirm) {
                  wx.makePhoneCall({
                    phoneNumber: '15640346926' //仅为示例，并非真实的电话号码
                  })
                } else if (res.cancel) {
                  console.log('用户点击取消')
                }
              }
            })
            break;
          case 1:
            wx.switchTab({
              url:'/pages/index/main'
            })
            break;
          case 2:
            //收藏
            break;  
          default:
            break;
        }
      }
  },
  // 上拉加载，拉到底部触发
  onReachBottom() {
    console.log('111')
    // 到这底部在这里需要接接口
    // this.loadMore();
  },
  onPageScroll(){
    console.log('222')
    // this.loadMore()
  },
  created () {
    
  }
}
</script>

<style scoped lang="less">
.nav_class{
  color: red!important;       
}
.scrool::-webkit-scrollbar {display:none}
.shop_details{
    width: 100%;
    height: 100%;
    background: #f5f5f5;
    .content{
      width: 100%;
      .swiper_box{
         position: relative;
         .swiper{
            width: 100%;
            height: 750rpx; 
            .swiper_img{
              width: 100%;
              height: 750rpx;
            }
          }
         .dots{
            width: 80rpx;
            height: 48rpx;
            color: #fff;
            background: #666;
            position: absolute;
            bottom: 20rpx;
            left: 336rpx;
            line-height: 48rpx;
            text-align: center;
            font-size: 26rpx;
            border-radius:24rpx;
          }
      }
      .shop_info{
        width: 100%;
        height: 166rpx;
        padding: 24rpx 30rpx 0 30rpx;
        box-sizing: border-box;
        background: #fff;
        margin-bottom: 20rpx;
        .shop_info_t{
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .shop_price{
            color: #333;
            font-size: 26rpx;
            span{
              color: #999;
              font-size: 24rpx;
              text-decoration:line-through
            }
          }
          .volume{
              color: #999;
              font-size: 24rpx;
          }
        }
        .shop_info_b{
          width: 100%;
          margin-top: 16rpx;
          display: flex;
          justify-content: space-between;
          .shop_title{
            // display: flex;
            width: 568rpx;
            color: #333;
            font-size: 28rpx;
            overflow:hidden;
            text-overflow: ellipsis;//显示省略号
            display:-webkit-box;
            -webkit-line-clamp:2;//块元素显示的文本行数
            -webkit-box-orient:vertical;
            .h_number{
              width:148rpx;
              height:34rpx;
              font-size:24rpx;
              font-weight:400;
              line-height:34rpx;
              color:rgba(255,255,255,1);
              background:rgba(255,61,79,1);
              border-radius:10rpx;
            }
          }
          .share{
            width: 100rpx;
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #707070;
            font-size: 24rpx;
            image{
              width: 42rpx;
              height: 40rpx;
            }
          }
        }
      }
      .parameter{
        width: 100%;
        height: 226rpx;
        background: #fff;
        padding: 0 30rpx;
        box-sizing: border-box;
        margin-bottom: 20rpx;
        .change_list{
          width: 100%;
          height: 72rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;
          color: #333;
          font-size: 26rpx;
          border-bottom: 2rpx solid #ccc;
          image{
            width: 18rpx;
            height: 32rpx;
          }
        }
        .sign{
          width: 100%;
          height: 76rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .sign_list{
            display: flex;
            align-items: center;
            color: #333;
            font-size: 24rpx;
            image{
              width: 24rpx;
              height: 24rpx;
              margin-right: 6rpx;
            }
          }
        }
        
      }
      .evaluate{
        width: 100%;
        padding: 0 30rpx;
        box-sizing: border-box;
        background: #fff;
        margin-bottom: 20rpx;
        .total{
          width: 100%;
          height: 74rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;
          border-bottom: 2rpx solid #ccc;
          .total_l{
            font-size:26rpx;
            color: #333;
          }
          image{
            width: 18rpx;
            height: 32rpx;
          }
        }
        .popre_list{
          width: 100%;
          color: #999;
          font-size: 26rpx;
          margin: 20rpx 0 ;
          .popre_header{
            width: 100%;
            height: 80rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .popre_l{
              display: flex;
              align-items: center;
              image{
                width: 80rpx;
                height: 80rpx;
                margin-right: 30rpx;
              }
              .popre_info{
                display: flex;
                flex-direction: column;
                .popre_name{
                  color: #333;
                }
                .popre_time{
                  font-size: 24rpx;
                }
              }
            }
            .popre_r{
              width: 164rpx;
              height: 28rpx;
              .stars{
                display: flex;
                justify-content: space-between;
                align-items: center;
                image{
                  width: 28rpx;
                  height: 28rpx;
                }
              }
            }
          }
          .popre_title{
            margin: 20rpx 0;
          }
          .evaluate_img_box{
              width: 100%;
              height: 220rpx;
              display: flex;
              justify-content: space-between;
              .evaluate_box{
                // width: 220rpx;
                // height: 220rpx;
                image{
                  width: 220rpx;
                  height: 220rpx;
                }
              }
              
            }
        }
        .all_evaluate_box{
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;      
          .all_evaluate{
            width:464rpx;
            height:60rpx;
            line-height: 60rpx;
            text-align: center;
            color: #333;
            font-size: 26rpx;
            background:rgba(255,255,255,1);
            border:2rpx solid rgba(112,112,112,1);
            opacity:1;
            border-radius:10rpx;
            margin-bottom: 40rpx;
         }
        }
        
      }
      .pull_up{
        width: 100%;
        height: 96rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #fff;
        .pull_l{
          width: 206rpx;
          height: 2rpx;
          background: #ccc;
        }
        .pull_r{
          width: 206rpx;
          height: 2rpx;
          background: #ccc;
        }
        .pull_title{
          display: flex;
          align-items: center;
          color: #666;
          font-size: 26rpx;
          image{
            width: 32rpx;
            height: 18rpx;
            margin-right: 20rpx;
          }
        }
      }
    }
    .footer{
       width: 100%;
       height: 94rpx;
       background: #fff;
       position: fixed;
       bottom: 0; 
       display: flex;
       align-items: center;
       justify-content: space-between;
       .footer_list{
         width: 392rpx;
         height: 94rpx;
         display: flex;
         align-items: center;
         justify-content: space-between;
         color: #333;
         font-size: 22rpx;
         border-top: 2rpx solid #ccc;
        //  border-left: 2rpx solid #ccc;
         border-bottom: 2rpx solid #ccc;
         box-sizing: border-box;
         .footer_info{
           flex: 1;
           padding: 8rpx 0;
           box-sizing: border-box;
           display: flex;
           align-items: center;
           justify-content: space-between;
           .footer_l{
             width: 2rpx;
             height: 36rpx;
             background: #707070;
           }
           .footer_r{
             width: 2rpx;
             height: 36rpx;
             background: #707070;
           }
           .footer_box{
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: space-between;
              box-sizing: border-box;
              image{
                width: 32rpx;
                height: 32rpx;
              }
           }
           
         }
       }
       .shopCar{
          width:180rpx;
          height:94rpx;
          background:rgba(255,158,61,1);
          opacity:1;
          line-height: 94rpx;
          text-align: center;
          color: #fff;
          font-size: 28rpx;
       }
       .goBuy{
          width:180rpx;
          height:94rpx;
          background:#FF3D4F;
          opacity:1;
          line-height: 94rpx;
          text-align: center;
          color: #fff;
          font-size: 28rpx;
       }
    }
    // 商品参数弹出层
    .shop_list{
        width: 100%;
        border-radius:30rpx 30rpx 0rpx 0rpx;
        background: #fff;
        padding: 30rpx 30rpx 20rpx 30rpx;
        box-sizing: border-box;
        font-size: 24rpx;
        color: #000;
        .shop_header{
          width: 100%;
          height: 170rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .shop_header_l{
            width: 170rpx;
            height: 170rpx;
          }
          .shop_header_r{
            width: 504rpx;
            height: 170rpx;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .header_r_t{
              overflow:hidden;
              text-overflow: ellipsis;//显示省略号
              display:-webkit-box;
              -webkit-line-clamp:2;//块元素显示的文本行数
              -webkit-box-orient:vertical;
            }
            .header_r_c{
              color: #999;
            }
            .header_r_b{
              font-size: 28rpx;
            }
          }
        }
        .color{
          font-size:26rpx;
          margin: 8rpx 0 14rpx 0;
        } 
        .color_list{
          display: flex;
          flex-wrap: wrap;
          margin-bottom: 12rpx;       
          width: 100%;
          .color_center{
            width:120rpx;
            height:50rpx;
            background:rgba(240,240,240,1);
            border-radius:40rpx;
            line-height: 50rpx;
            text-align: center;
            margin-bottom: 20rpx;
            margin-right: 50rpx;
          }
        }
        .size{
          font-size:26rpx;
          margin: 0rpx 0 16rpx 0;
        } 
        .size_list{
          display: flex;
          flex-wrap: wrap;
          margin-bottom: 34rpx; 
          width: 100%;
          .size_center{
            width:120rpx;
            height:50rpx;
            background:rgba(240,240,240,1);
            border-radius:40rpx;
            line-height: 50rpx;
            text-align: center;
            margin-bottom: 20rpx;
            margin-right: 50rpx;
          }
        }
        .mum_box{
          width: 100%;
          height: 40rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .num_l{
            color: #666;
            span{
              color: #000;
              font-size: 24rpx;
            }
          }
        }
        .shop_footer{
          width:616rpx;
          height:80rpx;
          line-height: 80rpx;
          text-align: center;
          color: #fff;
          background:rgba(255,61,79,1);
          border-radius:40rpx;
          font-size: 30rpx;
          margin: 62rpx 0 0 36rpx;
          
        }
      }
      .scrool::-webkit-scrollbar {display:none}
      // 商品选择弹出层
      .choice_box{
        width: 100%;
        height: 810rpx;
        border-radius:30rpx 30rpx 0rpx 0rpx;
        background: #fff;
        padding: 22rpx 38rpx 20rpx 38rpx;
        box-sizing: border-box;
        font-size: 26rpx;
        color: #000;
        .choice_title{
          width: 100%;
          height: 66rpx;
          background: #fff;
          display: flex;
          align-items: center;
          justify-content: center;
          position: fixed;
          top: 0;
          z-index: 9999;
          
          margin-bottom: 66rpx;
          div{
            // width: 100%;
            background: #fff;
            font-weight:bold;
            font-size:32rpx;
            color: #333;
            margin-right: 66rpx;
          }
        }
        .scrool::-webkit-scrollbar {display:none}
        .scrool{
          width: 100%;
          // display: flex;
          // flex-direction: column;
          padding-top: 66rpx;
          box-sizing: border-box;
          overflow-y: auto;
          height: 100%;
          .choice_list{
            width: 100%;
            height: 74rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 2rpx solid #ccc;
            .shop_choice_title{
              color: #999
            }
            .choice_content{
              width: 494rpx;
            }
          }
        }
        
        .choice_white{
          height: 120rpx;
          position: fixed;
          bottom: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          background: #fff;
          padding-right: 30rpx;
          box-sizing: border-box;
          z-index: 9999;
          .choice_footer{
            width:656rpx;
            height:80rpx;
            background:rgba(255,61,79,1);
            border-radius:40rpx;
            line-height: 80rpx;
            text-align: center;
            color: #fff;
            font-size: 28rpx;
          }
        }
        
      }

  }
</style>
